<template>
  <div v-if="detail" class="main w-full h-full">
    <order-nav :title="detail.nickName" :back="false" @back="back"/>
    <div class="mt-40 px-32">
      <p class="flex justify-between p-li">
        <span>{{$t('30日成单数')}}</span>
        <span
        ><span style="color: #000">{{ detail.thirtyDaysOrder }}</span
        >{{$t('次')}}</span
        >
      </p>
      <p class="flex justify-between p-li bor">
        <span>{{$t('30日成单率')}}</span>
        <span style="color: #000">{{ detail.thirtyDaysOrderRatio }}%</span>
      </p>
      <p class="flex justify-between p-li pd-t">
        <span>{{$t('平均放行')}}</span>
        <span
        ><span style="color: #000">{{ detail.thirtyDaysPassAverageTime }}</span
        >{{$t('分钟')}}</span
        >
      </p>
      <p class="flex justify-between p-li bor">
        <span>{{$t('平均放款')}}</span>
        <span
        ><span style="color: #000">{{ detail.thirtyDaysPayAverageTime }}%</span>{{$t('分钟')}}</span
        >
      </p>
      <p class="flex justify-between p-li pd-t">
        <span>{{$t('账户已创建')}}</span>
        <span
        ><span style="color: #000">{{ detail.accountCreateDays }}</span
        >{{$t('天')}}</span
        >
      </p>
      <p class="flex justify-between p-li">
        <span>{{$t('首次交易至今')}}</span>
        <span
        ><span style="color: #000">{{ detail.firstExchangeDays }}</span
        >{{$t('天')}}</span
        >
      </p>
      <p class="flex justify-between p-li">
        <span>{{$t('交易人数')}}</span>
        <span style="color: #000">{{ detail.exchangeUsers }}</span>
      </p>
      <p class="flex justify-between p-li">
        <span>{{$t('总成单数')}}</span>
        <span
        ><span style="color: #000">{{ detail.totalSuccessOrders }}</span
        >{{$t('次')}}</span
        >
      </p>
      <p class="flex justify-between p-li">
        <span>{{$t('数据')}}</span>
        <span>
        {{$t('购买')}}
        <span style="color: #000">{{ detail.buySuccessOrders }}</span>
        {{$t('| 出售')}}
        <span style="color: #000">{{ detail.sellSuccessOrders }}</span>
      </span>
      </p>
    </div>
  </div>
</template>

<script>
import {
  formatTime
} from "@/utils/utis";
import OrderNav from "@/components/order-nav/OrderNav";
export default {
  props: ['detail'],
  data() {
    return {
      info: {
        singularNumber: 1045,
        singularBai: '99.24%',
        release: 1.87,
        payment: 0.93,
        establish: 101,
        first: 231,
        num: 123,
        total: 12345,
        buy: 824,
        sell: 1093,
      },
    }
  },
  methods: {
    linkToBack() {
      this.$router.go(-1)
    },
    back() {
      this.$emit('back')
    }
  },
  components: {
    OrderNav,
  }
}
</script>

<style lang="scss" scoped>
.main {
  //padding: 0 30px;
  color: #868d9a;
  .p-li {
    padding-bottom: 44px;
  }
  .bor {
    border-bottom: 1px solid #eaebee;
  }
  .pd-t {
    padding-top: 40px;
  }
}
.nav {
  display: flex;
  align-items: center;
  font-size: 33px;
  font-weight: bold;
  color: #21262f;
  padding: 54px 0 80px;
  img {
    width: 32px;
    height: 32px;
    margin-right: 264px;
  }
}
</style>
